<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="/static/css/index.css"/>
    <script src="/static/js/jquery-3.2.1.min.js"></script>
    <script src="/static/js/echarts.min.js"></script>
    <title>消息中心</title>

</head>
<body>
<header>
    <div class="lf">
        <a class="home" href="index.html">系统首页</a>
        <!-- <a href="bbs.html">论坛</a> -->
        <a href="upload.html">上传资料</a>
    </div>
    <div id="search">
        <input type="text" name="name"
               placeholder="请输入要搜索的资源" autocomplete="off"/>
        <a class="search btn">搜索</a>
    </div>

    <div class="rf">
        <div class="email-info">
            <b>99</b>
            <ul class="email-list">
                <li><a href="./message.html">官方<b>0</b></a></li>
                <li><a href="./message.html">通知<b>0</b></a></li>
                <li><a href="./message.html">私信<b>0</b></a></li>
            </ul>
        </div>
        <a class="info" href="personal.html">个人中心</a>
        <a class="cols" href="shoucang.html">收藏</a>
        <a class="exit">退出登录</a>
    </div>
</header>

<article>
    <!-- 网站主体 -->
    <div id="main">
        <section class="ct">
            <h1 class="detail-msg">消息中心</h1>

            <div class="bg-hr"></div>

            <ul class="msg-menu">
                <li class="official">
                    <a class="active">官方(<b>0</b>)</a>
                    <div class="msg-content">
                        <a class="msg" href="">
                            <span>【公告】消息中心上线啦，快来体验吧～～～</span>
                            <span style="float: right">2022/02/27 14:22:22</span>
                        </a>
                        <!-- 没有消息的提示 -->
                        <!-- <a class="no-data"><img src="./images/404.svg"/>暂无消息</a> -->
                    </div>
                </li>
                <li class="notify">
                    <a>通知(<b>0</b>)</a>
                    <div class="msg-content">
                        <a class="msg" href="">
                            <span>【评论】<b>love残夜</b>评论了您的资源</span>
                            <span style="float: right">2022/02/27 14:22:22</span>
                        </a>

                        <a class="msg" href="/notice/detail.html">
                            <span>【审核】您上传的资源《MySQL从入门到精通》已通过审核</span>
                            <span style="float: right">2022/02/26 14:22:22</span>
                        </a>

                        <a class="msg">
                            <span>【下载】<b>love残夜</b>下载了您的资源《MySQL从入门到精通》</span>
                            <span style="float: right">2022/02/23 14:22:22</span>
                        </a>

                        <a class="msg">
                            <span>【收藏】<b>love残夜</b>收藏了您的资源《MySQL从入门到精通》</span>
                            <span style="float: right">2022/02/21 14:22:22</span>
                        </a>

                        <a class="msg">
                            <span>【关注】<b>沨烨</b>关注了您</span>
                            <span style="float: right">2022/02/21 14:22:22</span>
                        </a>
                    </div>
                </li>
                <li class="letter">
                    <a href="javascript:void(0)">私信(<b>0</b>)</a>
                    <div class="msg-content chatx">
                        <div src="./chat.html" id="chat" name="chat"></div>
                        <head>
                            <meta charset="utf-8">
                            <title>私信聊天</title>
                            <link rel="stylesheet" type="text/css" href="/static/css/index.css"/>
                            <script src="/static/js/jquery-3.2.1.min.js"></script>

                            <script>
                                function sendPrivateLetter(userId, receiveId, message) {
                                    $.ajax({
                                        url: '/send-private-letter/',
                                        method: 'POST',
                                        data: {
                                            'userid': userId,
                                            'receiveid': receiveId,
                                            'message': message,
                                            'csrfmiddlewaretoken': '{{ csrf_token }}'
                                        },
                                        success: function (response) {
                                            alert(response.message);
                                        },
                                        error: function () {
                                            alert('发送失败');
                                        }
                                    });
                                }

                                function getPrivateLetters(userId) {
                                    $.ajax({
                                        url: '/get-private-letters/',
                                        method: 'GET',
                                        data: {'user_id': userId},
                                        success: function (response) {
                                            if (response.status === 'success') {
                                                console.log(response.data); // 处理私信数据
                                            } else {
                                                alert(response.message);
                                            }
                                        },
                                        error: function () {
                                            alert('获取私信失败');
                                        }
                                    });
                                }
                            </script>
                        </head>
                        <body class="chat">
                        <!-- 好友列表 -->
                        <div class="list">
                            <span class="title">最近联系</span>
                            <div class="user-list">
                                <!-- 没有联系人的提示内容 -->
                                <!-- <a class="no-data"><img src="./images/404.svg"/>暂无联系人</a> -->

                                <!-- 联系人列表 -->
                                <a class="data active"><img src="/static/images/user.jpg"/><em>~飘雪</em></a>
                                <a class="data"><img src="/static/images/book.png"/><em>孤独的狼</em><b class="dot"></b></a>
                                <a class="data"><img src="/static/images/avi.svg"/><em>小羊</em><b class="dot"></b></a>
                                <a class="data"><img src="/static/images/user.jpg"/><em>请跟我走</em></a>
                                <a class="data"><img src="/static/images/user.jpg"/><em>我的网名有点长</em></a>

                            </div>
                        </div>
                        <!-- 聊天窗口 -->
                        <div class="content">
                            <!-- 没有选择联系人的情况下，默认显示的效果 -->
                            <!-- <a class="no-data"><img src="./images/404.svg"/>选择联系人</a> -->

                            <div class="header clearfix">
                                <span>与<b>~飘雪</b>的对话</span>
                                <a class="btn">加入黑名单</a>
                            </div>
                            <!-- 显示聊天内容 -->
                            <section class="msg" style="width: 800px">
                                <!-- 聊天内容， 没有聊天内容的时候，提示  开始聊天 -->
                                <!-- <a class="no-data">无聊天内容，开始聊天</a> -->

                                <div class="f">
                                    <div class="info">
                                        <img src="/static/images/user.jpg"/>
                                        <time style="margin-top: -20px">2022-08-13 18:43:22</time>
                                    </div>
                                    <div class="text">
                                        您的这本书可以免费发我一份吗？您的这本书可以免费发我一份吗？您的这本书可以免费发我一份吗？
                                    </div>
                                </div>

                                <div class="clearfix">
                                    <div class="t">
                                        <div class="info">
                                            <img src="/static/images/chat.gif"/>
                                            <time>2022-08-13 19:46:19</time>
                                        </div>
                                        <div class="text">可以，你可以加我的QQ,备注:需要电子书哟</div>
                                    </div>
                                </div>

                                <div class="clearfix">
                                    <div class="t">
                                        <div class="info">
                                            <img src="/static/images/chat.gif"/>
                                            <time>2022-08-13 19:46:19</time>
                                        </div>
                                        <div class="text">472759903</div>
                                    </div>
                                </div>

                                <div class="f">
                                    <div class="info">
                                        <img src="/static/images/user.jpg"/>
                                        <time>2022-08-13 18:48:48</time>
                                    </div>
                                    <div class="text">已加QQ,万分谢谢</div>
                                </div>

                            </section>
                            <!-- 显示 发送按钮 -->
                            <footer>
                                <textarea placeholder="请输入聊天信息"></textarea>
                                <a class="btn">发送消息</a>
                            </footer>
                        </div>

                        </body>
                    </div>
                </li>
                <li class="blist">
                    <a>黑名单</a>
                    <div class="msg-content">
                        <a class="msg">以下用户已添加至黑名单，你将不再收到对方的消息</a>
                        {#                        <a class="msg">#}
                        {#                            <span><img src="/static/images/unknown.png"/>love残夜</span>#}
                        {#                            <button class="btn">解除</button>#}
                        {#                        </a>#}

                        {% for black in black_list %}
                            <a class="msg">
                                <span><img src="/static/images/unknown.png"/>{{ black.blackId }}</span>
                                <a href="{% url 'notice:unblock_user' black.blackId %}" style="float: right; margin-top: -50px" class="btn">解除</a>
                            </a>

                        {% endfor %}


                        {#                       #}
                        {#                        <a class="msg">#}
                        {#                            <span><img src="/static/images/unknown.png"/>2</span>#}
                        {#                            <button class="btn">解除</button>#}
                        {#                        </a>#}
{#                        <script>#}
{#                            document.addEventListener('DOMContentLoaded', function () {#}
{#                                // 获取所有的解除按钮#}
{#                                const buttons = document.querySelectorAll('.btn');#}
{##}
{#                                buttons.forEach(button => {#}
{#                                    button.addEventListener('click', function () {#}
{#                                        const msgElement = this.closest('.msg');#}
{#                                        const userName = msgElement.querySelector('span').textContent.trim();#}
{##}
{#                                        // 这里可以添加请求以处理解除黑名单逻辑#}
{#                                        console.log(`解除用户: ${userName}`);#}
{##}
{#                                        // 示例: 直接从页面中移除该项#}
{#                                        msgElement.remove();#}
{##}
{#                                        // 还可以在这里发送请求到服务器#}
{#                                    });#}
{#                                });#}
{#                            });#}
{#                        </script>#}
                    </div>
                </li>
            </ul>

        </section>

    </div>
</article>
<footer>
    <p class="decro">本站所有资源信息均由网友上传,本站只是为了推广资源让更多读者下载,使用。如涉侵权，请联系管理员</p>
    <p class="cr">Copyright © 2021-2025 <span class="site">爱下载资源分享平台</span> All Rights Reserved.</p>
    <p class="num">沪ICP备14048333号</p>
</footer>

<script>
    $(function () {

        $(".msg-menu li > a").on("click", function (event) {
            $(this).addClass("active").parent().siblings().children("a").removeClass("active");
        })

        $(".msg-content .apply").on("click", function (event) {
            $(this).next("input").show().parent().siblings().find("input").hide();
        })
    })


</script>
</body>

</html>